<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { dwtxxzList } from "@/data/qkpdjl";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { postJbfaTable } from "@/api/table";

const city = window.globalObj.name;

const tableData = ref([]);
const tableData1 = ref([]);

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();

const valueHtml = ref(
  "<p>能力标准：XX均应建设基本指挥所、预备指挥所、机动指挥所，XX均应建设基本指挥所、预备指挥所、机动指挥所，XX应建设基本指挥所（或地面指挥中心）。<br/>能力需求：按战时需求和现有数量对比计算，共需建设指挥所XX个，分别为地面指挥中心XX个、基本指挥所XX个、预备指挥所XX个、机动指挥所XX个。</p>"
);
const valueHtml1 = ref(
  "<p>能力目标：XX均应实现有线、无线、网络、卫星等多种手段互联互通，确保战时指挥通信的畅通。<br/>能力需求：按战时需求和现有数量对比计算，各级各类指挥所（含地面指挥中心）需接入人防光缆专网的XX个、国家党政专网的XX个、民用互联网的XX个、装备125瓦短波电台的XX个、125瓦短波电台车载站的XX个、卫星地面站的XX个、卫星车载站的XX个、北斗导航定位系统的XX个、超短波数字集群XX个、超短波数字集群车载站XX个、4G/5G专网XX个、配备指挥信息系统的XX个、便捷指挥信息系统XX个、车载指挥信息系统XX个、空情接收处理自动化系统XX个、电话终端XX个。</p>"
);
const valueHtml2 = ref(
  "<p>能力标准：按城市人口比例XX‰的标准抽组人防专业队，专业队建设（扩编）应达标的总人数应不少于XX人。</p>"
);
const editorRef10 = shallowRef();
const valueHtml10 = ref("人防工程能力需求");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 =
  ref(`能力标准：按人均防护面积按###计算，按留城人口###万人计算，总计需求面积###万平方米。
能力需求：按需求量等于标准量与现有量的差值和人均防护面积###㎡计算，大庆市隐蔽场所战时可以满足需求。`);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref("疏散地域能力需求");
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref("疏散地域能力需求");
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};

const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "能力需求-平战转换行动能力需求" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥所能力需求")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "指挥手段能力需求")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "专业力量能力需求")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "人防工程能力需求")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "掩蔽场所能力需求")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "疏散地域能力需求")?.v || "";
    valueHtml13.value = data.find((x) => x.k === "疏散基地能力需求")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "能力需求-平战转换行动能力需求",
      data: [
        {
          k: "指挥所能力需求",
          v: valueHtml.value,
        },
        {
          k: "指挥手段能力需求",
          v: valueHtml1.value,
        },
        {
          k: "专业力量能力需求",
          v: valueHtml2.value,
        },
        {
          k: "人防工程能力需求",
          v: valueHtml10.value,
        },
        {
          k: "掩蔽场所能力需求",
          v: valueHtml11.value,
        },
        {
          k: "疏散地域能力需求",
          v: valueHtml12.value,
        },
        {
          k: "疏散基地能力需求",
          v: valueHtml13.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 指挥所能力需求清单
const zhsList = ref([]);
const getZhsData = () => {
  return postJbfaTable("zhsnlxqqdList").then((res) => {
    if (res.code === 200) {
      zhsList.value = res?.data || [];
    }
  });
};
// 地面指挥中心指挥手段能力需求清单
const dmzhList = ref([]);
const getDmzhData = () => {
  return postJbfaTable("dmzhzxzhsdnlxqList").then((res) => {
    if (res.code === 200) {
      dmzhList.value = res?.data || [];
    }
  });
};
// 基本指挥所指挥手段能力需求清单
const jbzhList = ref([]);
const getJbzhData = () => {
  return postJbfaTable("jbzhszhsdnlxqList").then((res) => {
    if (res.code === 200) {
      jbzhList.value = res?.data || [];
    }
  });
};
// 预备指挥所指挥手段能力需求清单
const ybList = ref([]);
const getYbData = () => {
  return postJbfaTable("ybzhszhsdnlxqList").then((res) => {
    if (res.code === 200) {
      ybList.value = res?.data || [];
    }
  });
};
// 机动指挥所指挥手段能力需求清单
const jdList = ref([]);
const getJdData = () => {
  return postJbfaTable("jdzhszhsdnlxqList").then((res) => {
    if (res.code === 200) {
      jdList.value = res?.data || [];
    }
  });
};
// 人防专业队能力目标标准一览表
const mbzhList = ref([]);
const getMbzhData = () => {
  return postJbfaTable("rfzydnlmbbzylbList").then((res) => {
    if (res.code === 200) {
      mbzhList.value = [
        {
          data0: "",
          data1: "队数",
          data2: "人数",
          data3: "队数",
          data4: "人数",
          data5: "队数",
          data6: "人数",
          data7: "队数",
          data8: "人数",
          data9: "队数",
          data10: "人数",
          data11: "队数",
          data12: "人数",
          data13: "队数",
          data14: "人数",
          data15: "队数",
          data16: "人数",
          data17: "队数",
          data18: "人数",
          data19: "队数",
          data20: "人数",
          data21: "队数",
          data22: "人数",
          data23: "队数",
          data24: "人数",
          data25: "队数",
          data26: "人数",
          data27: "队数",
          data28: "人数",
          data29: "队数",
          data30: "人数",
          data31: "队数",
          data32: "人数",
          data33: "队数",
          data34: "人数",
        },
        ...(res?.data || []),
      ];
    }
  });
};
// 人防工程能力标准一览表
const nlList = ref([]);
const getNlData = () => {
  return postJbfaTable("rfgcnlbzylbList").then((res) => {
    if (res.code === 200) {
      nlList.value = res?.data || [];
    }
  });
};
// 人防工程能力需求清单
const xqqdList = ref();
const getXqqdData = () => {
  return postJbfaTable("rfgcnlxqqdList").then((res) => {
    if (res.code === 200) {
      xqqdList.value = res?.data || [];
    }
  });
};
// 掩蔽场所能力建设标准一览表
// const jsbzList = ref([]);
// const getJsbzData = () => {
//   return postJbfaTable("ybcsnljsbzylbList").then((res) => {
//     if (res.code === 200) {
//       jsbzList.value = res?.data || [];
//     }
//   });
// };
// 掩蔽场所能力需求清单
// const ybqdList = ref([]);
// const getYbqdData = () => {
//   return postJbfaTable("ybcsnlxqqdList").then((res) => {
//     if (res.code === 200) {
//       ybqdList.value = res?.data || [];
//     }
//   });
// };
// 掩蔽场所能力建设标准一览表
// const nlbzList = ref([]);
// const getNlbzData = () => {
//   return postJbfaTable("ssdynlbzylbList").then((res) => {
//     if (res.code === 200) {
//       nlbzList.value = res?.data || [];
//     }
//   });
// };
// 疏散地域扩增接收人口能力需求清单
// const jsrkList = ref([]);
// const getJsrkData = () => {
//   return postJbfaTable("SSdykzjsrknlxqList").then((res) => {
//     if (res.code === 200) {
//       jsrkList.value = res?.data || [];
//     }
//   });
// };
// 疏散基地能力需求清单
// const ssjdList = ref([]);
// const getSsjdData = () => {
//   return postJbfaTable("ssjdnlxqqdList").then((res) => {
//     if (res.code === 200) {
//       ssjdList.value = res?.data || [];
//     }
//   });
// };

onMounted(async () => {
  initHtml();
  await getZhsData();
  await getDmzhData();
  await getJbzhData();
  await getYbData();
  await getJdData();
  await getMbzhData();
  await getNlData();
  await getXqqdData();
  // await getJsbzData();
  // await getYbqdData();
  // await getNlbzData();
  // await getJsrkData();
  // await getSsjdData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};

//
const handerMethodSd = ({ row, column, rowIndex, columnIndex, name }) => {
  nextTick(() => {
    const dom = document.querySelector(`.${column.id}`);
    if (columnIndex === 1 && column.label === name) {
      dom.setAttribute("colspan", 2);
      dom.innerHTML = column.label;
    }
    if (columnIndex === 2 && !column.label) {
      dom.setAttribute("colspan", 0);
      dom.style.display = "none";
    }
  });
  return {};
};

const getSummaries = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = "X";
  });
  return sums;
};

const getSummaries1 = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    sums[index] = "X";
  });
  return sums;
};

// 队伍体系表格
const headerCellStyleDwtx = ({ row, column, rowIndex, columnIndex }) => {
  nextTick(() => {
    if (columnIndex > 0) {
      const propNum = Number(column.property[column.property.length - 1]);
      const dom = document.querySelector(`.${column.id}`);
      if (propNum % 2 === 0) {
        // 被合并的
        dom.setAttribute("colspan", 0);
        dom.style.display = "none";
      } else {
        // 合并的
        dom.setAttribute("colspan", 2);
        dom.innerHTML = column.label;
      }
    }
  });

  return {
    height: "40px",
  };
};
const cellStyleDwtx = () => {
  return {
    height: "38px",
    padding: "4px 0",
    fontSize: "14px",
  };
};
const getSummariesDwtx = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = "X";
  });
  return sums;
};
</script>
<template>
  <div>
    <div class="top-15 zddj">
      主要明确平战转换、人员防护、重要目标防护、跨区支援行动所需的能力目标和需求清单等内容。
    </div>
    <FirstTitle name="指挥所能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}指挥所能力需求清单（单位:个）
    </div>
    <el-table
      id="table"
      :data="zhsList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政单位" />
      <el-table-column prop="data2" label="地面指挥中心" />
      <el-table-column prop="data3" label="基本指挥所" />
      <el-table-column prop="data4" label="预备指挥所" />
      <el-table-column prop="data5" label="机动指挥所" />
    </el-table>

    <FirstTitle name="指挥手段能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}地面指挥中心指挥手段能力需求清单
    </div>
    <el-table
      :data="dmzhList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: dmzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj text-center">
      {{ city }}基本指挥所指挥手段能力需求清单
    </div>
    <el-table
      :data="jbzhList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jbzhList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj text-center">
      {{ city }}预备指挥所指挥手段能力需求清单
    </div>
    <el-table
      :data="ybList"
      class="top-15"
      style="width: 100%"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: ybList.length,
          })
      "
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <div class="top-15 zddj text-center">
      {{ city }}机动指挥所指挥手段能力需求清单
    </div>
    <el-table
      :data="jdList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jdList.length,
          })
      "
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column label="设备数量">
        <el-table-column prop="guofang" label="国防动员信息网" />
        <el-table-column prop="dangzheng" label="国家党政专网" />
        <el-table-column prop="minyong" label="民用互联网" />
        <el-table-column prop="duanwabo" label="125瓦短波电台" />
        <el-table-column prop="duanwabochezai" label="125瓦短波电台车载站" />
        <el-table-column prop="weixingdimian" label="卫星地面站" />
        <el-table-column prop="weixingchezai" label="卫星车载站" />
        <el-table-column prop="beidoudaohang" label="北斗导航定位系统" />
        <el-table-column prop="chaoduanbo" label="超短波数字集群" />
        <el-table-column prop="chaoduanbochezai" label="超短波数字集群车载" />
        <el-table-column prop="zhihuixinxi" label="指挥信息系统" />
        <el-table-column prop="bianjizhihui" label="便捷指挥信息系统" />
        <el-table-column prop="chezaizhihuixinxi" label="车载指挥信息系统" />
        <el-table-column prop="kongqingyujing" label="空情预警信息系统" />
        <el-table-column prop="dianhuazhongduan" label="电话终端" />
        <el-table-column prop="zhuanwang" label="4G/5G专网" />
      </el-table-column>
    </el-table>

    <FirstTitle name="专业力量能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}人防专业队能力目标标准一览表（单位:人）
    </div>
    <el-table
      :header-cell-style="headerCellStyleDwtx"
      :cell-style="cellStyleDwtx"
      class="top-15"
      id="tableDwtx"
      :data="mbzhList"
      max-height="500px"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: mbzhList.length,
          })
      "
    >
      <el-table-column
        min-width="100"
        prop="data0"
        label="行政区域"
        align="center"
      />
      <el-table-column prop="data1" label="供水抢险抢修" align="center" />
      <el-table-column prop="data2" label="供水抢险抢修1" align="center" />
      <el-table-column prop="data3" label="电力抢险抢修" align="center" />
      <el-table-column prop="data4" label="电力抢险抢修1" align="center" />
      <el-table-column prop="data5" label="燃气抢险抢修" align="center" />
      <el-table-column prop="data6" label="燃气抢险抢修1" align="center" />
      <el-table-column prop="data7" label="供热抢险抢修" align="center" />
      <el-table-column prop="data8" label="供热抢险抢修1" align="center" />
      <el-table-column prop="data9" label="道桥抢险抢修" align="center" />
      <el-table-column prop="data10" label="道桥抢险抢修1" align="center" />
      <el-table-column prop="data11" label="建筑抢险抢修" align="center" />
      <el-table-column prop="data12" label="建筑抢险抢修1" align="center" />
      <el-table-column prop="data13" label="消防救援" align="center" />
      <el-table-column prop="data14" label="消防救援1" align="center" />
      <el-table-column prop="data15" label="医疗救护" align="center" />
      <el-table-column prop="data16" label="医疗救护1" align="center" />
      <el-table-column prop="data17" label="防化防疫" align="center" />
      <el-table-column prop="data18" label="防化防疫1" align="center" />
      <el-table-column prop="data19" label="治安" align="center" />
      <el-table-column prop="data20" label="治安1" align="center" />
      <el-table-column prop="data21" label="交通运输" align="center" />
      <el-table-column prop="data22" label="交通运输1" align="center" />
      <el-table-column prop="data23" label="通信" align="center" />
      <el-table-column prop="data24" label="通信1" align="center" />
      <el-table-column prop="data25" label="信息防护" align="center" />
      <el-table-column prop="data26" label="信息防护1" align="center" />
      <el-table-column prop="data27" label="心理防护" align="center" />
      <el-table-column prop="data28" label="心理防护1" align="center" />
      <el-table-column prop="data29" label="伪装防护专业队" align="center" />
      <el-table-column prop="data30" label="伪装防护专业队1" align="center" />
      <el-table-column prop="data31" label="核化检测洗消" align="center" />
      <el-table-column prop="data32" label="核化检测洗消1" align="center" />
    </el-table>

    <FirstTitle name="人防工程能力需求" class="top-15" />
    <!-- <div class="top-15 zddj">
      能力标准：按人均防护面积1.2㎡计算，总体防护面积建设应为XX㎡。具体情况如下：
    </div> -->
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <div class="top-15 zddj text-center">{{ city }}人防工程能力标准一览表</div>
    <el-table
      id="table"
      :data="nlList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: nlList.length,
          })
      "
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="标准建设面积（万㎡）" />
    </el-table>
    <!-- <div class="top-15 zddj">
      能力需求：按需求量等于标准量与现有量的差值和人均防护面积1.2㎡计算，需要增加建设总面积为XX㎡。具体情况如下：
    </div> -->
    <div class="top-15 zddj text-center">{{ city }}人防工程能力需求清单</div>
    <el-table
      id="table"
      :data="xqqdList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: xqqdList.length,
          })
      "
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="需要增加的防护面积（万㎡）" />
    </el-table>

    <FirstTitle name="掩蔽场所能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>

    <FirstTitle name="疏散地域能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>

    <FirstTitle name="疏散基地能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>